<template>
  <el-dialog
    :visible.sync="showDialog"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="800px"
    @close="closeDialog"
  >
    <div slot="title">
      <span>{{ title }}</span>
      <span class="primaryColor ml10 underline pointer" @click="releRecord">{{ $t('message.ksjl') }}</span>
      <span class="ml10" @click="innerVisible = true">{{ $t('message.qdsz') }}</span>
    </div>
    <el-form ref="qdForm" :model="qdForm" label-width="auto" :rules="rules" label-suffix="：" @submit.native.prevent>
      <el-form-item :label="$t('message.ewmqd')" prop="code">
        <el-input
          v-model="qdForm.code"
          :placeholder="$t('message.qsmsrewmxx')"
          style="width: 100%;"
          :disabled="qdForm.name != ''"
          @keyup.enter.native="searchBtn"
        />
      </el-form-item>
      <el-form-item :label="$t('message.hyqd')" prop="name">
        <el-autocomplete
          v-model="qdForm.name"
          :fetch-suggestions="queryMemberAsync"
          style="width: 100%"
          :placeholder="$t('message.qsshysjhkmkh')"
          :disabled="qdForm.code != ''"
          clearable
          @select="handleMemberSelect"
        />
      </el-form-item>
      <el-tabs v-if="qdForm.name && memberId" v-model="checkId" @tab-click="handleQuery">
        <el-tab-pane
          v-for="model in checkUl"
          :key="model.id"
          :label="model.name"
          :name="model.id"
        />
      </el-tabs>
      <div v-if="qdForm.name && memberId" class="verificat_info_wrap">
        <!-- <h2>当日可上课程：</h2> -->
        <div v-if="checkId == 'courseSignType001'" class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="">
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.id"
                class="info_item"
                :class="{ active: item.id === activeTicketItem.id }"
                @click="ticketItemClick(item)"
              >
                <h2>{{ item.courseName }}</h2>
                <div class="line">
                  <span
                    v-if="item.classDate"
                    class="span4"
                  >{{ $t('message.xyxm') }}：{{ item.studentName }}</span>
                  <span
                    v-if="item.beginTime"
                    class="span6"
                  >{{ $t('message.sysj') }}：<span class="primaryColor">{{
                    item.classDate + '   ' + item.beginTime + "-" + item.endTime
                  }}</span></span>
                </div>
                <div class="line">
                  <span
                    v-if="item.teacherName"
                    class="span6"
                  >{{ $t('message.skjl') }}：{{ item.teacherName }}</span>
                  <span
                    class="span4"
                  >{{ $t('message.syqk') }}：{{ item.signIn == 1?$t('message.yqd') : $t('message.wqd') }}
                  </span>
                </div>
              </div>
            </template>
          </div>
          <div v-if="verificatInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic
                "
                :preview-src-list="[
                  verificatInfo.showAvatar
                    ? verificatInfo.showAvatar
                    : default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ verificatInfo.nickName }}</div>
                <div class="phone">{{ verificatInfo.phone }}</div>
              </div>
            </div>
            <div v-if="verificatInfo.realName" class="line">
              <span class="key">{{ $t('message.zsxm') }}：</span>
              {{ verificatInfo.realName }}
            </div>
            <div class="line">
              <span class="key">{{ $t('message.sex') }}：</span>{{
                verificatInfo.sex === "1"
                  ? $t('message.nan')
                  : verificatInfo.sex === "2"
                    ? $t('message.nv')
                    : $t('message.bm')
              }}
            </div>
            <div v-if="verificatInfo.identityNumber" class="line">
              <span class="key">{{ $t('message.sfzh') }}：</span>{{ verificatInfo.identityNumber || "" }}
            </div>
            <div v-if="verificatInfo.number" class="line">
              <span class="key">{{ $t('message.hykh') }}：</span>{{ verificatInfo.number }}
            </div>
            <div v-if="verificatInfo.rechargeMoney" class="line">
              <span class="key">{{ $t('message.czje') }}：</span>{{ verificatInfo.rechargeMoney }}
            </div>
            <div v-if="verificatInfo.giveMoney" class="line">
              <span class="key">{{ $t('message.zsye') }}：</span>{{ verificatInfo.giveMoney }}
            </div>
            <div v-if="verificatInfo.integral" class="line">
              <span class="key">{{ $t('message.sfye') }}：</span>{{ verificatInfo.integral }}
            </div>
          </div>
        </div>
        <div v-if="checkId == 'courseSignType002'">
          <el-form-item :label="$t('message.kclx')" prop="courseType">
            <el-radio-group v-model="qdForm.courseType" @change="changeType">
              <el-radio label="1">{{ $t('message.cgk') }}</el-radio>
              <el-radio label="2">{{ $t('message.sjk') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="qdForm.courseType == 1">
            <el-form-item :label="$t('message.kcmc')" prop="courseId">
              <el-select v-model="qdForm.courseId" filterable :placeholder="$t('message.qxz')" style="width: 100%;" @change="changeCgk">
                <el-option v-for="item in courseLista" :key="item.courseId" :label="item.courseName" :value="item.courseId" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="qdForm.courseId" :label="$t('message.xyxm')" prop="studentIds">
              <el-select v-model="qdForm.studentIds" filterable multiple :placeholder="$t('message.qxz')" style="width: 100%;">
                <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName" :value="item.studentId" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="qdForm.courseId" :label="$t('message.keshi')" prop="courseTimeId">
              <el-select v-model="qdForm.courseTimeId" filterable :placeholder="$t('message.qxz')" style="width: 100%;">
                <el-option v-for="item in timeList" :key="item.courseTimeId" :label="item.time" :value="item.courseTimeId" />
              </el-select>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item :label="$t('message.tck')" prop="mealsMemberId">
              <el-select v-model="qdForm.mealsMemberId" :placeholder="$t('message.qxz')" filterable style="width: 100%;" @change="changeTc">
                <el-option v-for="item in tcList" :key="item.mealsMemberId" :label="item.mealsName" :value="item.mealsMemberId" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="qdForm.mealsMemberId" :label="$t('message.kcmc')" prop="courseId">
              <el-select v-model="qdForm.courseId" :placeholder="$t('message.qxz')" filterable style="width: 100%;" @change="changeKc">
                <el-option v-for="item in courseList" :key="item.courseId" :label="item.courseName" :value="item.courseId" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('message.xyxm')" prop="studentIds">
              <div style="display: flex">
                <el-select v-model="qdForm.studentIds" multiple filterable :placeholder="$t('message.qxz')" style="flex: 1" @change="changeTimeInfo">
                  <el-option v-for="item in studentListb" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item v-if="qdForm.courseId" :label="$t('message.jiaolian')" prop="teacherId">
              <el-select v-model="qdForm.teacherId" :placeholder="$t('message.qxz')" filterable style="width: 100%;" @change="reserveClassInfoPC">
                <el-option v-for="item in teachList" :key="item.teacherId" :label="item.teacherName" :value="item.teacherId" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="qdForm.courseId && qdForm.teacherId" :label="$t('message.ksc')" prop="count">
              <div style="display: flex">
                <!-- :disabled="item.status !== '1'" -->
                <el-select v-model="qdForm.count" filterable :placeholder="$t('message.qxz')" style="width: 100%;">
                  <el-option v-for="(item, index) in timeListb" :key="index" :value="index + 1" />
                </el-select>
                <el-button
                  class="ml10"
                  type="primary"
                  @click="rowRuleClick"
                >{{ $t('message.xzks') }}</el-button>
              </div>
            </el-form-item>
          </template>
        </div>
      </div>
    </el-form>
    <div v-if="qdForm.name && memberId" slot="footer" class="verificat_footer">
      <div />
      <div>
        <el-button @click="showDialog = false">{{ $t('message.qx') }}</el-button>
        <el-button
          type="primary"
          :loading="qdLoading"
          @click="qdbtn"
        >{{ $t('message.qrqd') }}</el-button>
      </div>
    </div>
    <el-dialog
      width="30%"
      :title="$t('message.shizhi')"
      top="20vh !important"
      :visible.sync="innerVisible"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      append-to-body
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in configList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick type="primary" :loading="loading" @click="addSigin">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.xzxy')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="600px"
      :visible.sync="showStudent"
      append-to-body
    >
      <el-form
        ref="formStudent"
        :model="formStudent"
        label-width="auto"
        :rules="ruleb"
        label-suffix="："
      >
        <el-form-item prop="name" :label="$t('message.xyxm')">
          <el-input
            v-model="formStudent.name"
            maxlength="50"
            :placeholder="$t('message.qsr') + $t('message.xyxm')"
            clearable
          />
        </el-form-item>
        <el-form-item prop="sex" :label="$t('message.xyxb')">
          <el-select
            v-model="formStudent.sex"
            style="width: 100%"
            :placeholder="$t('message.qxz') + $t('message.sex')"
          >
            <el-option value="1" :label="$t('message.nan')" />
            <el-option value="2" :label="$t('message.nv')" />
            <el-option value="0" :label="$t('message.bm')" />
          </el-select>
        </el-form-item>
        <el-form-item prop="birthday" :label="$t('message.csrq')">
          <el-date-picker
            v-model="formStudent.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="$t('message.qxz') + $t('message.csrq')"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item prop="idCard" :label="$t('message.sfzh')">
          <el-input
            v-model="formStudent.idCard2"
            maxlength="18"
            :placeholder="$t('message.qsr') + $t('message.xysfzh')"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showStudent = false">{{ $t('message.qx') }}</el-button>
        <el-button :loading="subStuLoading" type="primary" @click="onSubmitb">{{ $t('message.baocun') }}</el-button>
      </div>
    </el-dialog>
    <Ykgz ref="ykgz" :teacher-name="qdForm.teacherName" :teacher-id="qdForm.teacherId" @success="reserveClassInfoPC()" />
  </el-dialog>
</template>

<script>
import {
  memberList,
  memberCourseToday,
  signConfig,
  studentListByMember,
  reserveClassInfoPC,
  memberCourse,
  memberMealsCourse,
  configList,
  studentAdd,
  studentSignInPC
} from '@/api'
import { parseTime } from '@/utils/index'
import Ykgz from '../../offlinecourses/coachManagement/coachAdmin/ykgz.vue'
import store from '@/store'
export default {
  components: {
    Ykgz
  },
  data() {
    return {
      title: this.$t('message.skqd'),
      showStudent: false,
      subStuLoading: false,
      formStudent: {},
      modalDialog: store.getters.dialog,
      innerVisible: false,
      showDialog: false,
      loading: false,
      qdLoading: false,
      checkList: [],
      configList: [],
      ruleb: {
        name: [{ required: true, message: this.$t('message.qsr') + this.$t('message.xyxm'), trigger: 'blur' }]
      },
      checkUl: [],
      memberId: '',
      checkId: '',
      qdForm: {
        code: '',
        name: '',
        studentIds: [],
        count: '',
        courseType: '1',
        detail: {}
      },
      courseLista: [],
      courseList: [],
      teachList: [],
      tcList: [],
      studentList: [],
      studentListb: [],
      timeList: [],
      timeListb: [],
      TicketAbleList: [],
      TicketAbleResult: false,
      activeTicketItem: {},
      verificatInfo: {},
      default_pic: require('@/icons/png/default_pic.png'),
      rules: {
        courseTimeId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.keshi'), trigger: 'change' }
        ],
        count: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.keshi'), trigger: 'change' }
        ],
        courseType: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.kslx'), trigger: 'change' }
        ],
        mealsMemberId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.tc'), trigger: 'change' }
        ],
        teacherId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.jiaolian'), trigger: 'change' }
        ],
        courseId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.kc'), trigger: 'change' }
        ],
        studentIds: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.xueyuan'), trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getSignConfig()
  },
  methods: {
    showAddBtn() {
      this.showStudent = true
      this.formStudent = {}
    },
    rowRuleClick() {
      this.$refs.ykgz.rowRuleClick()
    },
    reserveClassInfoPC() {
      this.$set(this.qdForm, 'count', '')
      if (this.qdForm.courseId && this.qdForm.teacherId) {
        const teachList = [...this.teachList]
        teachList.forEach(e => {
          if (e.teacherId === this.qdForm.teacherId) {
            this.$set(this.qdForm, 'teacherName', e.teacherName)
          }
        })
        reserveClassInfoPC({ param: { teacherId: this.qdForm.teacherId, courseId: this.qdForm.courseId, day: parseTime(new Date()).slice(0, 10) }})
          .then((res) => {
            if (res.errorCode !== '000000') return
            if (res.record.timeInfos && res.record.timeInfos.length > 0) {
              if (this.qdForm.mealsType === '3') {
                const num = Number(this.qdForm.remainNumCount)
                let lengths = 1
                if (this.qdForm.studentIds.length > 0) {
                  lengths = this.qdForm.studentIds.length
                }
                const number = Math.floor(num / lengths)
                const arr = []
                for (let i = 0; i < number; i++) {
                  arr.push(i)
                }
                this.timeListb = arr
              } else {
                this.timeListb = res.record.timeInfos || []
              }
            } else {
              this.timeListb = []
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        this.timeListb = []
      }
    },
    onSubmitb() {
      const param = { ...this.formStudent }
      if (!param.name) {
        this.$message.error(this.$t('message.qsr') + this.$t('message.xyxm'))
        return
      }
      if (param.birthday) {
        param.birthday = param.birthday + ' 00:00:00'
      }
      if (param.idCard2) {
        param.idCard = param.idCard2
      }
      param.memberId = this.memberId
      this.subStuLoading = true
      studentAdd({
        param
      })
        .then((res) => {
          this.subStuLoading = false
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.tjcg2'))
            this.showStudent = false
            this.getStuList()
          }
        })
        .catch((err) => {
          this.subStuLoading = false
          console.log(err)
        })
    },
    getStuList() {
      studentListByMember({
        param: {
          memberId: this.memberId
        }
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.studentListb = res.recordList
        })
        .catch(err => {
          console.log(err)
        })
    },
    getSignConfig() {
      configList({ param: { type: '23' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const configList = res.recordList
          this.configList = configList
          const checkList = []
          const checkUl = []
          configList.forEach(e => {
            if (e.value === '1') {
              checkList.push(e.id)
              checkUl.push(e)
            }
          })
          this.checkId = checkList[0]
          this.checkUl = checkUl
          this.checkList = checkList
          if (this.checkId === 'courseSignType002' && this.memberId) {
            this.getMemberCourse()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    changeCgk() {
      const courseList = [...this.courseLista]
      this.$set(this.qdForm, 'courseTimeId', '')
      this.$set(this.qdForm, 'teacherId', '')
      this.$set(this.qdForm, 'count', '')
      this.$set(this.qdForm, 'studentIds', [])
      courseList.forEach(e => {
        if (e.courseId === this.qdForm.courseId) {
          this.studentList = e.studentList
          this.timeList = e.timeList
          this.$set(this.qdForm, 'courseMemberId', e.id)
        }
      })
    },
    changeTimeInfo() {
      // const timeListb = [...this.timeListb]
      // this.$set(this.qdForm, 'courseTimeId', '')
      // const checkList = [...this.qdForm.timeInfo]
      // let obj
      // const arr = []
      // timeListb.forEach(e => {
      //   obj = e.startTime + '-' + e.endTime
      //   if (checkList.indexOf(obj) > -1) {
      //     arr.push(e)
      //   }
      // })
      // this.$set(this.qdForm, 'timeInfos', arr)
      if (this.qdForm.mealsType === '3' && this.timeListb.length > 0) {
        const num = Number(this.qdForm.remainNumCount)
        let lengths = 1
        if (this.qdForm.studentIds.length > 0) {
          lengths = this.qdForm.studentIds.length
        }
        const number = Math.floor(num / lengths)
        const arr = []
        for (let i = 0; i < number; i++) {
          arr.push(i)
        }
        this.timeListb = arr
      } else {
        this.reserveClassInfoPC()
      }
    },
    changeKc(type) {
      const courseList = [...this.courseList]
      if (type !== 3) {
        this.$set(this.qdForm, 'courseTimeId', '')
        this.$set(this.qdForm, 'teacherId', '')
        this.$set(this.qdForm, 'count', '')
      }
      courseList.forEach(e => {
        if (e.courseId === this.qdForm.courseId) {
          this.teachList = e.item
          if (e.normalTeacherId) {
            this.$set(this.qdForm, 'teacherId', e.normalTeacherId)
          }
        }
      })
    },
    changeType() {
      this.$set(this.qdForm, 'courseTimeId', '')
      this.$set(this.qdForm, 'studentIds', [])
      this.$set(this.qdForm, 'courseId', '')
      this.$set(this.qdForm, 'teacherId', '')
      this.$set(this.qdForm, 'count', '')
      this.$refs.qdForm.clearValidate()
    },
    changeTc() {
      const tcList = [...this.tcList]
      this.$set(this.qdForm, 'courseTimeId', '')
      this.$set(this.qdForm, 'teacherId', '')
      tcList.forEach(e => {
        if (e.mealsMemberId === this.qdForm.mealsMemberId) {
          this.$set(this.qdForm, 'mealsType', e.mealsType)
          this.$set(this.qdForm, 'remainNumCount', e.remainNumCount)
          this.courseList = e.item
          if (e.courseId) {
            this.$set(this.qdForm, 'courseId', e.courseId)
            // if (e.teacherId) {
            //   this.$set(this.qdForm, 'teacherId', e.teacherId)
            // }
            this.changeKc(3)
          }
          if (e.students) {
            this.$set(this.qdForm, 'studentIds', [e.students])
            this.reserveClassInfoPC()
          } else {
            this.$set(this.qdForm, 'studentIds', [])
            this.reserveClassInfoPC()
          }
        }
      })
    },
    getMemberCourse() {
      memberCourse({ param: { memberId: this.memberId }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.courseLista = res.recordList
        })
        .catch((err) => {
          console.log(err)
        })
      memberMealsCourse({ param: { memberId: this.memberId }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.tcList = res.recordList
        })
        .catch((err) => {
          console.log(err)
        })
    },
    addSigin() {
      const configList = [...this.configList]
      const checkList = [...this.checkList]
      const list = []
      if (!checkList || checkList.length === 0) {
        return this.$message.info(this.$t('message.qxz') + this.$t('message.qdsz'))
      }
      configList.forEach(e => {
        if (checkList.indexOf(e.id) > -1) {
          e.value = '1'
          list.push(e)
        } else {
          e.value = '0'
          list.push(e)
        }
      })
      signConfig({ param: { list }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.$t('message.qdsz') + this.$t('message.success'))
          this.getSignConfig()
          this.innerVisible = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleQuery() {
      if (this.checkId === 'courseSignType001') {
        this.getList()
      } else {
        this.getMemberCourse()
      }
    },
    open() {
      this.showDialog = true
      this.qdForm = {
        code: '',
        name: '',
        studentIds: [],
        count: '',
        courseType: '1',
        detail: {}
      }
      this.studentListb = []
      this.memberId = ''
      this.verificatInfo = {}
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
    },
    closeDialog() {
      this.showDialog = false
      this.qdForm = {
        studentIds: [],
        count: '',
        courseType: '1'
      }
    },
    ticketItemClick(item) {
      this.activeTicketItem = { ...item }
    },
    handleMemberSelect(item) {
      const { id } = item
      this.memberId = id
      this.verificatInfo = item
      this.getStuList()
      if (this.checkId === 'courseSignType001') {
        this.getList()
      } else {
        this.getMemberCourse()
      }
    },
    getList() {
      this.TicketAbleList = []
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      memberCourseToday({ param: { memberId: this.memberId }}).then((resb) => {
        if (resb.errorCode !== '000000') return
        this.TicketAbleResult = true
        this.$nextTick(() => {
          this.TicketAbleList = resb.recordList
          if (resb.recordList.length > 0) {
            this.activeTicketItem = resb.recordList[0]
          }
        })
      })
    },
    searchBtn() {
      const qdForm = { ...this.qdForm }
      if (!qdForm.code) { return false }
      studentSignInPC({ param: { code: qdForm.code, signType: '1' }}).then((resb) => {
        if (resb.errorCode !== '000000') return
        this.$message.success(this.$t('message.qdcg'))
        this.showDialog = false
      })
    },
    qdbtn() {
      let param = {}
      if (this.checkId === 'courseSignType001') {
        param = { id: this.activeTicketItem.id, signType: '1' }
      } else {
        param = { ...this.qdForm, signType: '2', memberId: this.memberId }
      }
      this.$refs.qdForm.validate((valid) => {
        if (valid) {
          this.qdLoading = true
          studentSignInPC({ param }).then((resb) => {
            this.qdLoading = false
            if (resb.errorCode !== '000000') return
            this.TicketAbleResult = false
            this.$message.success(this.$t('message.qdcg'))
            this.showDialog = false
          }).catch(() => {
            this.qdLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    queryMemberAsync(queryString, cb) {
      const data = {
        pagination: {
          firstQueryTime: '',
          page: 1,
          rows: 100
        },
        param: {
          keyword: queryString
        }
      }
      memberList(data).then((res) => {
        if (res.errorCode !== '000000') return
        const result = res.recordList
        this.verificatInfo = {}
        this.TicketAbleList = []
        result.forEach((item) => {
          item.value = item.nickName
          if (item.phone) {
            item.value += '-' + item.phone
          }
          if (item.cardName) {
            item.value += '（' + item.cardName + '）'
          }
        })
        cb(result)
      })
    },
    releRecord() {
      this.showDialog = false
      this.$router.replace(`/offlinecourses/classRecord`)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.verificat_info_wrap {
  .verificat_info-main {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
      height: 380px;
      margin-right: 20px;

      .info_item {
        cursor: pointer;
        padding: 6px 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #dfe2e8;

        h2 {
          padding: 5px 0;
          margin: 0;
          font-size: 16px;
        }

        .line {
          display: flex;
          padding: 5px 0;

          .span6 {
            flex: 5;
          }

          .span4 {
            flex: 5;
          }
        }
      }

      .active {
        border: 1px solid #435ebe;
        background: #f4f7fc;
      }

      .default_noticket {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 160px;
        }
      }
    }

    .right {
      width: 280px;
      height: 380px;
      background-color: #f4f7fc;
      padding: 20px;

      .head_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .wrap {
          flex: 1;

          .name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          .phone {
            color: #666666;
          }
        }
      }

      .line {
        margin-top: 20px;

        .key {
          display: inline-block;
          // width: 70px;
        }
      }
    }
  }
}

.verificat_footer{
  text-align: left;
  display: flex;
  justify-content: space-between;
  .verificat_num_wrap{
    flex: 1;
  }
}
</style>
